<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./home.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>Document</title>
</head>

<body id="body">

    <div v-for="val,index in list">
        <div v-if="val.status">

            <div class="lists">
                <div><img width="200" height="200" v-bind:src="val.imges" alt=""></div>
                <div>{{val.text}}</div>
                <div>{{val.price}}￥</div>
                <div>库存:{{val.status}}</div>
                <!-- <div><input type="text" v-model="val.quantity"></div> -->

                <div>
                    <input type="button" value="+" @click="jia(index)">
                    <input type="text" v-model="val.quantity" @change="getchange(index,val.quantity)">
                    <input type="button" value="-" @click="jian(index)">
                    <input type="button" value="购买">
                </div>

                <div><input type="button" value="新增" @click="updata(index)"><input type="button" value=删除 @click="delet(index)"></div>
            </div>

        </div>
    </div>
    <div class="aggregate">总计：{{total}}</div>



</body>
<script>

    const app = Vue.createApp({
        data: function () {
            return {




                list: [
                    {
                        imges: 'https://img20.360buyimg.com/babel/s320x320_jfs/t1/210475/25/11888/111868/61b05bd3E20fc84b2/e3d98f6e4399d962.jpg!cc_320x320.webp',
                        text: '拜亚动力/拜雅 (beyerdynamic) DT 900 PRO X 头戴式监听录音室开放式专用HiFi耳机',
                        price: 200,//价格
                        quantity: null,//购买数量
                        status: 100,//库存
                        amount: 0,
                        
                    },
                    {
                        imges: 'https://img13.360buyimg.com/n7/jfs/t1/135403/21/31738/70720/641d7ff7F4556f856/75e467e8af84a094.jpg',
                        text: '一加Ace2V新机上市！天玑9000移动平台，1.5K灵犀触控直屏，晒单赢30元京豆，以旧换新至高补贴600元！点击购买',
                        price: 2299,
                        quantity: null,
                        status: 100,
                        amount: 0,
                        
                    },
                    {
                        imges: 'https://img13.360buyimg.com/n7/jfs/t1/70419/16/16878/18502/638df5eeEead825ef/b6f20262ae9782e2.jpg',
                        text: '【春日添新意】指定iPhone14到手低至5399元！！！点击',
                        price: 5399,
                        quantity: null,
                        status: 100,
                        amount: 0,
                        
                    }
                ],


            }
        },

        //方法
        methods: {
            getchange: function (id, data) {

                this.list[id].status -= data
                //   data = this.list[id].status-data
                //     console.log(this.list);
            },

            //删除元素
            delet: function (index) {
                // list[list.length - 1].status = 0

                if (confirm('确定要删除吗')) {
                    this.list.splice(index, 1)
                }


            },
            //添加元素
            updata: function (index) {
                this.list.splice(index, 0, this.list[index])

            },
             
            //加减数量
            jia: function (id) {
                this.list[id].quantity++
            },
            jian: function (id) {
                if (this.list[id].quantity <= 0) return
                this.list[id].quantity--
            }

        },


        //计算属性
        computed: {


            total() {
                let num = null
                this.list.forEach(val => {

                    num += (val.quantity * val.price)
                })

                return num

            }


        },



        //监听属性
        watch: {


            list: {

                deep: true,
                handler(val, val2) {
                    val.forEach(element => {
                        if (element.quantity > 10) {
                            alert('最多限购10件')
                            element.quantity = 0
                        }


                    });
                }
            }




        }
    })

    app.mount('#body')

</script>

</html>